import React, { useState, createElement, useEffect } from 'react';
import { Input, Comment, Tooltip, Avatar } from 'antd';
import moment from 'moment';
import { DislikeOutlined, LikeOutlined, DislikeFilled, LikeFilled } from '@ant-design/icons';
import { reqCommitSupport } from '../../../../api';
const ExampleComment = ({children, props}) => {
    const [likes, setLikes] = useState(props.supportNumber);
    const [dislikes, setDislikes] = useState(0);
    const [action, setAction] = useState(null);
    const [isOnclick, setIsOnclick] = useState(false)

    const like = async() => {
        if(!isOnclick){
            await setLikes(a=> a+1);
            await setDislikes(0);
            await setIsOnclick(a => !a)
            await setAction('liked');
            // let result = await reqCommitSupport(props.id)
            // await setLikes(result.data);
        }else{
            setIsOnclick(a=> !a)
            setLikes(a => a - 1);
            setAction(null);
        }
        
    };

    const dislike = () => {
        if (!isOnclick) {
            setIsOnclick(a => !a)
            setDislikes(b => b + 1);
            setAction('disliked');
        } else {
            setIsOnclick(a => !a)
            setDislikes(b => b - 1);
            setAction(null);
        }
    };
    const actions = [
        <Tooltip key="comment-basic-like" title="Like">
            <span onClick={like}>
                {createElement(action === 'liked' ? LikeFilled : LikeOutlined)}
                <span className="comment-action">{likes}</span>
            </span>
        </Tooltip>,
        <Tooltip key="comment-basic-dislike" title="Dislike">
            <span onClick={dislike}>
                {React.createElement(action === 'disliked' ? DislikeFilled : DislikeOutlined)}
                <span className="comment-action">{dislikes}</span>
            </span>
        </Tooltip>,
        // <span key="comment-basic-reply-to">Reply to</span>,
    ];
    useEffect(() => {

    }, [])
    return <Comment
        actions={props.supportNumber?actions:[]}
        author={<a>{props.authorVo ? props.authorVo.username : props.username}</a>}
        avatar={<Avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />}
        content={
            <p>
                {
                    props.content
                }
            </p>
        }
        datetime={
            <Tooltip title={moment().format('YYYY-MM-DD HH:mm:ss')}>
                <span>{moment(props?.createDate).fromNow()}</span>
            </Tooltip>
        }
    >
        {children}
    </Comment>
}

export default ExampleComment